<template>
    <div>
        <div class="row">
            <div style="width: 100%">
                <span class="user-info-title">个人信息</span>
                <button class="btn btn-outline-info" v-on:click="edit()" style="float: right">编辑</button>
                <hr>
            </div>
            <div style="width: 90%;margin: 0 auto">
                <div class="info-list">
                    <div class="title-div text-center">
                        登录名
                    </div>
                    <div class="info-div">
                        {{loginUser.userName}}
                    </div>
                </div>
                <div class="info-list">
                    <div class="title-div text-center">
                        昵称
                    </div>
                    <div class="info-div">
                        {{loginUser.name}}
                    </div>
                </div>
                <div class="info-list">
                    <div class="title-div text-center">
                        城市
                    </div>
                    <div class="info-div">
                        <span v-if="!userInfo.city">未设置</span>
                        <span v-if="userInfo.city">{{userInfo.city}}</span>
                    </div>
                </div>
                <div class="info-list">
                    <div class="title-div text-center">
                        性别
                    </div>
                    <div class="info-div">
                        <span v-if="!userInfo.gender">未设置</span>
                        <span v-if="userInfo.gender">{{GENDER | optionKV(userInfo.gender)}}</span>
                    </div>
                </div>
                <div class="info-list">
                    <div class="title-div text-center">
                        <span style="font-size: 14px">个性签名</span>
                    </div>
                    <div class="info-div">
                        <span v-if="!userInfo.aboutme">未设置</span>
                        <p v-if="userInfo.aboutme">{{userInfo.aboutme}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">编辑个人信息</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-10 custom-control-label">昵称</label>
                                <div class="col-sm-10">
                                    <input class="form-control" v-model="nameEdit">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-10 custom-control-label">所在地区</label>
                                <div class="col-sm-10">
                                    <v-distpicker :province="infoEdit.province" :city="infoEdit.city" :area="infoEdit.area" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-10 custom-control-label">性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" v-model="infoEdit.gender">
                                        <option v-for="o in GENDER" v-bind:value="o.key">
                                            {{o.value}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-10 custom-control-label">个性签名</label>
                                <div class="col-sm-10">
                                    <textarea class="no-resize form-control" v-model="infoEdit.aboutme"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</template>

<script>
    import VDistpicker from 'v-distpicker'
    export default {
        name: "Info",
        components:{VDistpicker},
        data:function () {
            return {
                loginUser: {},
                userInfo: {},

                // 编辑时的用户信息
                infoEdit: {},
                nameEdit: '',

                GENDER: GENDER,
            }
        },
        mounted() {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();

            _this.getUserInfo();
        },
        methods:{
            onChangeProvince(a){
                this.infoEdit.province = a.value
            },
            onChangeCity(a){
                this.infoEdit.city = a.value
            },
            onChangeArea(a){
                this.infoEdit.area = a.value
            },
            getUserInfo(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/user/get-user-info/'+_this.loginUser.id).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        _this.userInfo = resp.content || {};
                    }
                })
            },
            edit(){
                let _this = this;
                _this.nameEdit = _this.loginUser.name;
                _this.infoEdit = {
                    province: _this.userInfo.province,
                    city: _this.userInfo.city,
                    area: _this.userInfo.area,
                    gender: _this.userInfo.gender,
                    aboutme: _this.userInfo.aboutme
                }
                $("#edit-modal").modal('show');
            },
            save(){
                let _this = this;
                _this.userInfo = _this.infoEdit;
                _this.userInfo.userId = _this.loginUser.id;
                _this.userInfo.name = _this.nameEdit;
                if(1 != 1
                    || !Validator.require(_this.userInfo.name, "昵称")
                    || !Validator.require(_this.userInfo.province, "省份")
                    || !Validator.require(_this.userInfo.city, "城市")
                    || !Validator.require(_this.userInfo.area, "区县")
                    || !Validator.require(_this.userInfo.gender, "性别")
                ) {
                    return;
                }
                if(_this.userInfo.province ==='省' || _this.userInfo.city === '市' || _this.userInfo.area === '区'){
                    Toast.warning('请正确填写地址');
                    return;
                }
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/user/user/save-user-info',_this.userInfo).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        Toast.success('保存成功');
                        $("#edit-modal").modal('hide');
                        _this.getUserInfo();
                        _this.$parent.getUserName();
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .user-info-title{
        font-size: 25px;
        font-weight: bold;
    }
    .info-list{
        margin-top: 10px;
        width: 100%;
        height: 70px;
        display: flex;
    }
    .title-div{
        width: 20%;
        height: inherit;
        line-height: 70px;
        font-weight: bold;
        font-size: 16px;
        background-color: #f3f5f7;
    }
    .info-div{
        width: 75%;
        height: inherit;
        line-height: 70px;
        font-size: 16px;
        vertical-align: center;
        /*background-color: #27689d;*/
        margin-left: 20px;
        border-bottom: 2px solid rgba(0,0,0,0.1);
    }
    .no-resize{
        resize: none;
    }
</style>